<template>
	<view class="content">
		<!-- <ch-indexed :data="letterList"  @change="letterChange"></ch-indexed> -->
		<ch-indexed mode="more" @change="letterChange"></ch-indexed>
		<!-- <ch-indexed @change="letterChange"></ch-indexed> -->

		<scroll-view scroll-y style="position: absolute;height: 100%;" :scroll-into-view="siview" @scroll="whenSchool">
			<view :id="`siv_${item}`" class="module" v-for="(item,index) in letterList" :key="index">
				<view class="title">{{item}}</view>
				<view class="content">{{item}}</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				siview: '',
				letterList: [
					'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N',
					'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				],
			}
		},
		onLoad() {

		},
		methods: {
			letterChange(e) {
				console.log(e);
				this.siview = `siv_${e.value}`
			},
			whenSchool() {
				this.siview = ''
			}
		}
	}
</script>

<style lang="scss" scoped>
	.module {
		margin-top: 30rpx;
		padding: 0 30rpx;

		.title {
			font-size: 36rpx;
			color: #8f8f94;
		}

		.content {
			width: 100%;
			height: 600rpx;
			line-height: 600rpx;
			background-color: #C0C0C0;
			text-align: center;
			font-size: 80rpx;
		}
	}
</style>
